<template>
  <div 
    :class="$style.container" 
    class="a_right">
    <div 
      v-if="$store.state.user.user.userId" 
      :class="$style.isLogin"
      class="login">
      <!-- <el-button 
        :class="$style.shopCart" 
        round>
        <i :class="['iconfont', 'icon-htmal5icon29',$style.icon]"/>
        购物车</el-button> -->
      <img 
        v-if="$store.state.user.user.avatar"
        :src="$api.prefix+ $store.state.user.user.avatar" 
        :class="$style.avatar" 
        @mouseover="avatarmouseover" 
        @mouseout="avatarmouseout">
      <img 
        v-else
        :class="$style.avatar" 
        src="//img.mukewang.com//54584d1d00015c0b02200220.jpg" 
        @mouseover="avatarmouseover" 
        @mouseout="avatarmouseout">
      <dl 
        ref="setting" 
        :class="$style.person" 
        @mouseover="avatarmouseover"
        @mouseout="avatarmouseout">
        <dt>
          <div :class="$style.left">
            <img 
              v-if="$store.state.user.user.avatar"
              :src="$api.prefix+$store.state.user.user.avatar">
            <img 
              v-else 
              src="//img.mukewang.com//54584d1d00015c0b02200220.jpg">
          </div>
          <div :class="$style.right">
            <span>{{ $store.state.user.user.name || $store.state.user.user.userId }}</span>
          </div>
        </dt>
        <dd>
          <el-button 
            :class="$style.btn" 
            @click.stop="handleOrderClick">订单中心</el-button>
          <el-button 
            :class="$style.btn" 
            @click.stop="handleUserClick">个人设置</el-button>
        </dd>
        <dd>
          <nuxt-link to="/logout">
            <span 
              :class="$style.quit" 
            >安全退出</span>
          </nuxt-link>
        </dd>
      </dl>
    </div>
    <div v-else>
      <el-button 
        type="text" 
        @click.stop="handleOpenClick('signIn')">登录</el-button>
      <el-button 
        type="text" 
        @click.stop="handleOpenClick('signUp')">注册</el-button>
    </div>
    <el-dialog 
      :visible.sync="$store.state.app.isShow" 
      :before-close="handleCloseClick" 
      :close-on-click-modal="false" 
      width="400px">
      <el-tabs 
        v-model="activeName" 
        class="a_modal">
        <el-tab-pane 
          label="登录" 
          name="signIn">
          <el-form 
            ref="signIn"
            :model="form" 
            :rules="rules" 
            :class="$style.modal" 
            label-width="0px" 
            @keyup.enter.native="submitForm('signIn')">
            <el-form-item prop="account">
              <el-input 
                v-model="form.account" 
                placeholder="请输入登录邮箱" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input 
                v-model="form.password" 
                type="password" 
                placeholder="请输入密码" />
            </el-form-item>
            <el-form-item>
              <el-button 
                round 
                @click.stop="submitForm('signIn')">登录</el-button>
            </el-form-item>
            <el-form-item style="text-align:left;">
              <span :class="$style.loginText">其他登录方式</span>
              <svg 
                :class="$style.github" 
                height="32" 
                class="octicon octicon-mark-github" 
                viewBox="0 0 16 16" 
                version="1.1" 
                width="32" 
                aria-hidden="true" 
                @click.stop="handleGithubClick">
                <path 
                  fill-rule="evenodd" 
                  d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" /></svg>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane 
          label="注册" 
          name="signUp">
          <el-form 
            ref="signUp"
            :model="form1" 
            :rules="rules" 
            :class="$style.modal"
            label-width="0px" 
            @keyup.enter.native="submitForm('signUp')">
            <el-form-item prop="account">
              <el-input 
                v-model="form1.account" 
                placeholder="请输入注册邮箱" 
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input 
                v-model="form1.password" 
                placeholder="请输入注册密码" />
            </el-form-item>
            <el-form-item 
              prop="username" 
              required>
              <el-input 
                v-model="form1.username" 
                placeholder="请输入您的昵称" />
            </el-form-item>
            <el-form-item style="text-align: left;">
              <el-checkbox v-model="form1.checked" />
              <span>
                同意<a style="cursor:pointer;">《注册协议》</a>
              </span>
            </el-form-item>
            <p 
              v-if="!form1.checked" 
              :class="$style.tip">请同意注册协议</p>
            <el-form-item>
              <vertify 
                :refresh="refresh" 
                @success="vertifySuccess"/>
            </el-form-item>
            <el-form-item>
              <el-button 
                :disabled="disabled" 
                round
                @click.stop="submitForm('signUp')">注册</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
import Vertify from '../vertify/index.vue'
import { signPwd, github } from '../../util/config'
import { setToken } from '../../util/auth'
import http from '../../APIService/http'
export default {
  components: {
    Vertify
  },
  data() {
    return {
      refresh: false,
      disabled: true,
      activeName: 'signIn',
      form: {
        account: '',
        password: ''
      },
      form1: {
        account: '',
        password: '',
        username: '',
        checked: false
      },
      rules: {
        account: [
          {
            required: true,
            message: '请输入邮箱地址',
            trigger: 'blur'
          },
          {
            type: 'email',
            message: '请输入正确的邮箱',
            trigger: ['blur']
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, message: '密码长度至少8位', trigger: 'blur' }
        ]
      },
      timer1: null
    }
  },
  methods: {
    // 提交表单
    submitForm(formName) {
      this.$store.commit('SET_SHOW', false)
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (formName === 'signIn') {
            this.signIn()
          } else if (formName === 'signUp') {
            this.signUp()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 登录
    async signIn() {
      try {
        let params = {
          account: this.form.account,
          password: signPwd(this.form.password)
        }
        let res = await http.post(`/login`, params)
        if (res.code === 0) {
          setToken(res.data.token)
          window.location.href = '/'
        }
      } catch (err) {
        console.log('111:', err)
      }
    },
    // 注册
    async signUp() {
      try {
        let params = {
          account: this.form1.account,
          password: signPwd(this.form1.password),
          username: this.form1.username
        }
        let res = await http.post(`/register`, params)
        if (res.code === 0) {
          this.$message({
            type: 'success',
            message: '恭喜您注册成功'
          })
        }
      } catch (err) {
        console.log('11:', err)
      }
    },
    // 打开登录、注册 框
    handleOpenClick(data) {
      if (data === 'signIn') {
        this.activeName = 'signIn'
      } else if (data === 'signUp') {
        this.activeName = 'signUp'
      }
      this.$store.commit('SET_SHOW', true)
    },
    // 关闭登录、注册框
    handleCloseClick() {
      this.$store.commit('SET_SHOW', false)
      this.activeName = 'signIn'
      this.refresh = true
      setTimeout(() => {
        this.refresh = false
      }, 50)
      this.reset()
    },
    // 验证 滑动模块
    vertifySuccess() {
      this.disabled = false
    },
    // 重置表单
    reset() {
      this.form = {
        account: '',
        password: ''
      }
      this.form1 = {
        account: '',
        password: '',
        checked: false
      }
    },
    // 鼠标移入
    avatarmouseover() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.$refs.setting.style.display = 'block'
    },
    // 鼠标离开
    avatarmouseout() {
      this.timer = setTimeout(() => {
        this.timer = null
        this.$refs.setting.style.display = 'none'
      }, 50)
    },
    // 订单列表
    handleOrderClick() {
      this.$router.push({
        path: '/user/order'
      })
    },
    // 个人设置
    handleUserClick() {
      this.$router.push({
        path: '/user/setting'
      })
    },
    // github登录
    async handleGithubClick() {
      this.$message({
        type: 'warning',
        message: '该功能暂未开放'
      })
      // window.location.href = `https://github.com/login/oauth/authorize?client_id=2e6d20e586cd35405929&scope=user:email`
      // let res = await http.get(`/github`)
      // console.log('1!!:', res)
    }
  }
}
</script> 
<style lang="scss" module>
.container {
  margin-right: 20px;
  height: 60px;
  line-height: 60px;
  button {
    cursor: pointer;
    color: #e36049;
    &:hover,
    &:focus {
      color: #e36049;
    }
  }
  .isLogin {
    height: 60px;
    padding-top: 10px;
    box-sizing: border-box;
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .person {
      display: none;
      margin: 0px;
      width: 300px;
      padding: 20px 20px 0px;
      background-color: #fff;
      border-bottom-right-radius: 8px;
      border-bottom-left-radius: 8px;
      box-sizing: border-box;
      background: #fff;
      position: relative;
      right: -200px;
      top: -14px;
      z-index: 1001;
      border: 1px solid #f4f4f4;
      dt {
        line-height: 60px;
        height: 60px;
        overflow: hidden;
        .left {
          float: left;
          margin-right: 20px;
          margin-left: 20px;
          img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
        }
        .right {
          float: left;
        }
      }
      dd {
        margin-left: 20px;
        text-align: left;
        .btn {
          position: relative;
          background: #f8fafc;
          border-radius: 2px;
          color: #4d555d;
          margin: 0 2px 2px 0;
          &:hover {
            color: #e36049;
            border-color: #e3494912;
            background-color: #e3494912;
          }
        }
        &:last-child {
          height: 40px;
          line-height: 40px;
          margin-left: 0px;
          border-top: 1px solid #edf1f2;
        }
        .quit {
          color: #93999f;
          cursor: pointer;
          &:hover {
            color: #e36049;
          }
        }
      }
    }

    .shopCart {
      margin-right: 20px;
      vertical-align: top;
      color: #787d82;
      cursor: pointer;
      .icon {
        color: #787d82;
        font-size: 20px;
      }
    }
  }

  .github {
    vertical-align: middle;
    margin-left: 70px;
    cursor: pointer;
  }
  .modal {
    button {
      width: 100%;
      background: #e36049;
      color: #fff;
    }
    .loginText {
      color: #9199a1;
      font-size: 14px;
    }
    .tip {
      text-align: left;
      margin-top: -30px;
      margin-bottom: 10px;
      color: #e36049;
    }
  }
}
</style>
<style scoped>
.verify-bar-area {
  position: relative;
  background: #ffffff;
  text-align: center;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
}
.verify-bar-area .verify-msg {
  z-index: 3;
}

.verify-bar-area .verify-left-bar {
  position: absolute;
  top: -1px;
  left: -1px;
  background: #f0fff0;
  cursor: pointer;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border: 1px solid #ddd;
}

.verify-bar-area .verify-move-block {
  position: absolute;
  top: 0px;
  left: 0;
  background: #fff;
  cursor: pointer;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  box-shadow: 0 0 2px #888888;
  -webkit-border-radius: 1px;
}

.verify-bar-area .verify-move-block .verify-icon {
  font-size: 18px;
}

.a_right >>> .el-tabs__nav-wrap::after {
  background: #fff;
}
.a_right >>> .el-dialog__body {
  padding: 0px 20px;
}
.a_right >>> .el-dialog__header {
  padding: 0px;
}
.a_modal >>> .is-active {
  border-bottom: none !important;
  color: #e36049 !important;
}
.a_modal >>> .el-tabs__active-bar {
  background-color: #e36049;
}
.a_modal >>> .el-tabs__item:hover {
  color: #e36049;
}
.a_right >>> .el-dialog__header .el-dialog__headerbtn {
  z-index: 100;
}
.a_right >>> .el-button.is-disabled,
.a_right >>> .el-button.is-disabled:focus,
.a_right >>> .el-button.is-disabled:hover {
  color: #fff;
  cursor: not-allowed;
  background-image: none;
  background-color: #e36049;
  border-color: #e36049;
}
.login >>> .el-button:focus,
.login >>> .el-button:hover {
  color: #e36049;
  border-color: #e3494912;
  background-color: #e3494912;
}
</style>
